<!DOCTYPE html>
<html>
  <head>
    <title>购物车</title>
    <meta charset="utf-8" />
    <style type="text/css">
      h1 {
        text-align:center;
      }
      table {
        margin:0 auto;
        width:60%;
        border:2px solid #aaa;
        border-collapse:collapse;
      }
      table th, table td {
        border:2px solid #aaa;
        padding:5px;
      }
      th {
        background-color:#eee;
      }
    </style>
    <script>
    	//加入购物车
    	//调用此函数时传入了this，
    	//声明参数来接收它，参数名
    	//不能叫this(关键字)。
    	function add_shoppingcart(btn) {
    		console.log(btn);
    		//获取按钮的爷爷(tr)
    		var tr = btn.parentNode.parentNode;
    		//获取tr的所有的孩子(tds)
    		var tds = tr.getElementsByTagName("td");
    		//获取第1个td的内容(商品名)
    		var name = tds[0].innerHTML;
    		//获取第2个td的内容(单价)
    		var price = tds[1].innerHTML;
    		//测试
    		console.log(name + "," + price);
    		//创建1个新的行tr
    		var ntr = document.createElement("tr");
    		//给这个行设置内容
    		ntr.innerHTML = 
  			 '<td>'+name+'</td>'+
          '<td>'+price+'</td>'+
          '<td align="center">'+
            '<input type="button" value="-" onclick="decrease(this);"/> '+
            '<input type="text" size="3" readonly value="1"/> '+
            '<input type="button" value="+" onclick="increase(this);"/>'+
          '</td>'+
          '<td>'+price+'</td>'+
          '<td align="center"><input type="button" value="x"/></td>';		
    		//将这个行追加到tbody下
    		var tbody = 
    			document.getElementById("goods");
    		tbody.appendChild(ntr);
    		sum();
    	}
    	//加法
    	function increase(btn) {
    		//获取按钮的父亲(td2)
    		var td2 = btn.parentNode;
    		//获取td2内的文本框
    		var text = 
    			td2.getElementsByTagName("input")[1];
    		//获取框内的值，+1后写回文本框
    		var amount = text.value;
    		text.value = ++amount;
    		//获取td2的哥哥td1
    		var td1 = 
    			td2.parentNode.getElementsByTagName("td")[1];
    		//从td1中取出单价
    		var price = td1.innerHTML;
    		//计算金额
    		var mny = price*amount;
    		//获取td2的弟弟td3
    		var td3 = 
    			td2.parentNode.getElementsByTagName("td")[3];
    		//将金额写入td3
    		td3.innerHTML = mny;
    		sum();
    	}
    	//减法：数量不能小于1
    	function decrease(btn) {
    		
    	}
    	//计算合计
    	function sum() {
    		//获取购物车内所有的数据行
    		var tbody = 
    			document.getElementById("goods");
    		var trs = 
    			tbody.getElementsByTagName("tr");
    		//遍历这些行
    		var s = 0;
    		for(var i=0;i<trs.length;i++) {
    			//获取每一行下第4个td的内容(金额)
    			var mny = 
    				trs[i].getElementsByTagName("td")[3].innerHTML;
    			//累加
    			s += parseFloat(mny);
    		}
    		//将合计值写入合计列(id="total")
    		var td = 
    			document.getElementById("total");
    		td.innerHTML = s;
    	}
    </script>
  </head>
  <body>
    <h1>真划算</h1>
    <table>
      <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>颜色</th>
        <th>库存</th>
        <th>好评率</th>
        <th>操作</th>
      </tr>   
      <tr>
        <td>罗技M185鼠标</td>
        <td>80</td>
        <td>黑色</td>
        <td>893</td>
        <td>98%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>微软X470键盘</td>
        <td>150</td>
        <td>黑色</td>
        <td>9028</td>
        <td>96%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>洛克iphone6手机壳</td>
        <td>60</td>
        <td>透明</td>
        <td>672</td>
        <td>99%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>蓝牙耳机</td>
        <td>100</td>
        <td>蓝色</td>
        <td>8937</td>
        <td>95%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>金士顿U盘</td>
        <td>70</td>
        <td>红色</td>
        <td>482</td>
        <td>100%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
    </table>
  
    <h1>购物车</h1>
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>单价(元)</th>
          <th>数量</th>
          <th>金额(元)</th>
          <th>删除</th>
        </tr>
      </thead>
      <tbody id="goods">
        <!-- 
        <tr>
          <td>罗技M185鼠标</td>
          <td>80</td>
          <td align="center">
            <input type="button" value="-"/>
            <input type="text" size="3" readonly value="1"/>
            <input type="button" value="+"/>
          </td>
          <td>80</td>
          <td align="center"><input type="button" value="x"/></td>
        </tr>
         -->
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" align="right">总计</td>
          <td id="total"></td>
          <td></td>
        </tr>
      </tfoot>
    </table>    
  </body>
</html>